// 1 先得到scroll
var scroll = document.querySelector('#scroll')
// 2 再得到img数组
var imgs = scroll.querySelectorAll('img')
// console.log(imgs);
// 3 得到每张图片的宽度 - scroll的宽度
var imgWidth = scroll.clientWidth
// 得到点的数组
var dots = scroll.querySelectorAll('.dot')
//  得到上一页按钮
var prev = scroll.querySelector('#prer')
//  得到下一页按钮
var next = scroll.querySelector('#next')
// 定义一个变量 存储当前播放到的图片索引
var page = 0
// 得到图片数量
var size = imgs.length
// 定时器索引
var timer = null

// 页面初始函数
function init() {
    // 排列图片
    for (var index = 0; index < imgs.length; index++) {
        // 算法
        imgs[index].style.left = index * imgWidth + 'px';
    }
    // 第一个点默认变白，因为默认显示第一张图片
    dots[0].style.backgroundColor = '#fff'
}

// 如何切换图片
function changeImg() {
    // 切换图片
    for (var index = 0; index < imgs.length; index++) {
        imgs[index].style.left = (index - page) * imgWidth + 'px';
    }
    // 改变点
    // 所有的点背景颜色透明
    for (var i = 0, len = dost.length; i < len; i++) {
       dots[i].style.backgroundColor = 'transparent'
    }
    // 让对应的播放到的点变白
    dots[page].style.backgroundColor = '#fff'
}

// 自动播放 每隔一段时间让page值自动加1
function autoPlay(){
    timer = setInterval(function(){
        page++;
        if (page > size - 1) page = 0
        changeImg()
    }, 2000)
}

// 停止播放
function stopPlay(){
    if(timer){
        clearInterval(timer)
    }
}

// 轮播图开始
function start(){
    // 初始化
    init()
    // 自动播放
    autoPlay()
    // 鼠标移入停止自动播放
    scroll.addEventListener('mouseover', function(){
        stopPlay()
    })
    // 鼠标移入开始自动播放
    scroll.addEventListener('mouseout', function(){
        autoPlay()
    })
    // 点击点切换对应的图片
    for (var i = 0; i < dots.length; i++) {
        dots[i].id = i
        dots[i].addEventListener('click', function () {
            page = this.id
            changeImg()
        })
    }

    // 实现上一页
    prev.addEventListener('click', function() {
        // 切换为当前页
        page--;
        // 索引
        if (page < 0) page = size - 1
        // 播放
        changeImg()
    })

    // 实现下一页
    next.addEventListener('click', function () {
        // 切换为当前页-1
        page++;
        // 索引
        if (page > size - 1) page = 0
        // 播放
        changeImg()
    })
}

start()